/*
产品库12
*/
<template>
  <div class="app-page">
    <!-- 操作菜单区 -->
    <my-header>
      <el-button type="primary" @click="handleAddUpdate()" v-repeatClick>添加</el-button>
      <el-button v-repeatClick>批量操作商品</el-button>
      <el-button @click="handleAddUpdate('mod')" v-repeatClick>修改</el-button>
      <el-button @click="enabled(false)">禁用</el-button>
      <el-button @click="enabled(true)">启用</el-button>
      <el-button @click="productView" v-repeatClick>查看</el-button>
      <el-button @click="getProduct" v-repeatClick>刷新</el-button>
      <el-button type="danger" @click="delProduct" v-repeatClick>删除</el-button>
    </my-header>

    <!-- 列表区 -->
    <div style="flex: 1; margin-bottom: 10px">
      <div style="display: flex" class="content-height">
        <el-card style="width: 250px">
          <div style="margin-bottom: 10px;line-height: 30px">
            <span>商品分类名称</span>
            <span style="float: right">
              <el-button
                type="primary"
                circle
                v-repeatClick
                class="el-icon-plus"
                title="添加"
                @click="handleGoodsTypeAdd()"
              ></el-button>
            </span>
          </div>
          <el-input
            clearable
            placeholder="请输入商品分类名称"
            style="margin-bottom: 10px"
            v-model="filterText">
          </el-input>
          <el-tree
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
            :render-after-expand="false"
            :default-expanded-keys="defaultExpanded"
            :expand-on-click-node="false"
            class="el-tree-project"
            :accordion="true"
            node-key="typeName"
            ref="tree"
            :filter-node-method="filterNode"
            highlight-current
          ><!---:render-content="renderContent"-->
            <span
              class="custom-tree-node"
              slot-scope="{ node, data }"
              @mouseover="handleMouseOver(node,data)"
              @mouseout="handleMouseOut(node,data)">
              <el-tooltip
                effect="dark"
                :content="data.typeName"
                placement="top"
                :enterable="false">
                <span class="tree-node-title">
                  {{data.typeName}}
                </span>
              </el-tooltip>
              <span
                class="tree-node-tool"
                :style="{display: data.isHover? 'block' : 'none'}">
                <i class="el-icon-plus" @click="handleGoodsTypeAdd(node,data)"></i>
                <i class="el-icon-edit" @click="handleGoodsTypeUpdate(node,data)"></i>
                <i class="el-icon-delete" @click="handleGoodsTypeDelete(node,data)"></i>
              </span>
            </span>
          </el-tree>
        </el-card>
        <el-card style="flex: 1; margin-left: 10px">
          <div class="app-page">
            <!-- 搜索区 -->
            <div class="content-flex">
              <div>
                <el-form ref="search" :model="search" inline size="small">
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="" prop="name">
                        <el-input
                          style="width: 300px"
                          placeholder="搜索:SUK编码/中文名称/英文品牌/规格型号"
                          v-model="search.name"
                          clearable
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="" prop="Audit">
                        <el-select
                          clearable
                          v-model="search.Audit"
                          placeholder="是否审核"
                          style="width: 100px"
                        >
                          <el-option label="是" :value="true"></el-option>
                          <el-option label="否" :value="false"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="" prop="ItemSold">
                        <el-select
                          clearable
                          v-model="search.ItemSold"
                          placeholder="是否单品销售"
                          style="width: 130px"
                        >
                          <el-option label="是" :value="true"></el-option>
                          <el-option label="否" :value="false"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="" prop="Enabled">
                        <el-select
                          clearable
                          v-model="search.Enabled"
                          placeholder="是否启用"
                          style="width: 100px"
                        >
                          <el-option label="是" :value="true"></el-option>
                          <el-option label="否" :value="false"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="" style="float: right;" class="storeColor">
                        <el-button
                          class="storeColor"
                          type="text"
                          v-if="productType"
                          style="font-size: 14px;"
                          >{{ productType }}</el-button>
                        <span v-else>全部商品</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="创建时间" prop="time">
                        <el-date-picker
                          v-model="search.time"
                          type="daterange"
                          value-format="yyyy-MM-dd"
                          range-separator="-"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
                        </el-date-picker>
                      </el-form-item>
                      <el-form-item label="" prop="query_batchId">
                        <el-button type="primary" round @click="getProduct">搜索</el-button>
                        <el-button
                          type="warning"
                          round
                          @click="$refs.search.resetFields()">重置</el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </div>
            <!-- 列表区 -->
            <div style="flex: 1">
              <el-table
                height="100%"
                :data="data"
                border
                stripe
                highlight-current-row
                ref="multipleTable"
                @row-dblclick="handleRowDbclick"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="index" width="55" align="center">
                </el-table-column>
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column label="SKU编码"></el-table-column>
                <el-table-column label="包邮商品名称" sortable></el-table-column>
                <el-table-column label="英文品牌" sortable></el-table-column>
                <el-table-column label="规格型号"></el-table-column>
                <el-table-column label="分类"></el-table-column>
                <el-table-column label="单位"></el-table-column>
                <el-table-column label="区间价格" sortable></el-table-column>
                <el-table-column label="审核" sortable align="center" width="100">
                  <template slot-scope="scope">
                    <span style="font-size: 20px">
                      <i
                        class="el-icon-circle-check"
                        style="color: #67c23a"
                        v-if="scope.row.enabled"
                      ></i>
                      <i
                        class="el-icon-circle-close"
                        style="color: #f56c6c"
                        v-else
                      ></i>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="启用" sortable align="center" width="100">
                  <template slot-scope="scope">
                    <span style="font-size: 20px">
                      <i
                        class="el-icon-circle-check"
                        style="color: #67c23a"
                        v-if="scope.row.enabled"
                      ></i>
                      <i
                        class="el-icon-circle-close"
                        style="color: #f56c6c"
                        v-else
                      ></i>
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 分页区 -->
            <div style="margin-top: 10px">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 50, 100, 200, 500, 1000]"
                :page-size="pageSize"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 添加商品分类信息 -->
    <el-dialog
      :title="title + '商品分类'"
      v-dialog-drag
      :visible.sync="dialogFormTypeVisible"
      :close-on-click-modal="false"
      @close="restFormType"
      width="500px"
    >
      <el-form
        size="small"
        :model="goodsTypeForm"
        label-position="left"
        label-width="80px"
        ref="goodsTypeForm"
        :rules="goodsTypeRules"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="上级名称">
              <span>{{disabled?'主目录':goodsTypeForm.parentTypeName}}</span><!----goodsTypeForm.parentTypeName--->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item prop="typeName" label="名称">
              <el-input v-model="goodsTypeForm.typeName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item prop="typeSpell" label="拼音">
              <el-input v-model="goodsTypeForm.typeSpell"></el-input>
            </el-form-item>
          </el-col>
<!--          <el-col :span="12">-->
<!--            <el-form-item prop="typeLevel" label="排序号">-->
<!--              <el-input v-model="goodsTypeForm.typeLevel" :disabled="disabled" @blur="handleBlur"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24" style="text-align: right">
            <el-form-item>
              <el-checkbox v-model="goodsTypeForm.enabled">启用</el-checkbox>
              <el-button style="margin-left: 10px" @click="restFormType">重置</el-button>
              <el-button type="primary" @click="submitGoodsType">保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </el-dialog>
  </div>
</template>

<script>
let search = {
  //搜索:SUK编码/中文名称/英文品牌/规格型号
  name: "",
  //是否审核
  Audit: "",
  //是否单品销售
  ItemSold: "",
  //是否启用
  Enabled: "",
  //创建时间
  time: "",
};
let goodsTypeForm = {
  //商品类型上级id
  parentType: 0,
  //商品类型上级名称
  parentTypeName: "",
  //商品类型级别(排序号)
  typeLevel: "",
  //商品类型名称
  typeName: "",
  //商品类型拼音
  typeSpell: "",
  //是否启用
  enabled: true,
}
import myHeader from "@/components/pageHEader/pageHeader";
import {
  getGoodsType,
  goodsTypeAdd,
  goodsTypeMod,
  goodsTypeDel,
} from "@/api/parts/mailfree/goodstype";
export default {
  name: 'mailfree',
  components:{
    myHeader
  },
  data(){
    return{
      pageSize: 20,
      currentPage: 1,
      total: 0,
      data:[],
      //表格选中
      multipleSelection: [],
      treeData:[],
      filterText:'',
      defaultProps: {
        value:'id',
        children: 'childrenTypes',
        label: 'typeName'
      },
      defaultExpanded:[],
      //搜索
      search: this.cloneObj(search),
      //选中产品类型
      productType: "",
      //商品分类对话框
      dialogFormTypeVisible: false,
      title: "添加",
      goodsTypeRules:{
        //商品分类名称
        typeName: [this.$RegExp.required('名称不能为空')],
      },
      goodsTypeForm:this.cloneObj(goodsTypeForm),
      disabled:false,
      node:{}
    }
  },
  mounted() {
    this.getProduct()
  },
  methods:{
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    //点击tree树图
    handleNodeClick(data,node) {
      this.productType = data.typeName;
    },
    //过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.typeName.indexOf(value) !== -1;
    },
    //添加/修改
    handleAddUpdate(){},
    //禁用/启用
    enabled(){},
    //查看
    productView(){},
    //刷新
    getProduct(){
      let query = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        typeName: this.typeName,
      }
      getGoodsType(query).then(resp=>{
        this.treeData = resp.data.records
      })
    },
    //删除
    delProduct(){},
    //表格双击修改
    handleRowDbclick(row) {},
    //
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //处理鼠标移出任务
    handleMouseOut(node,data) {
      this.$set(data, "isHover", false);
    },
    //处理鼠标移动到任务上
    handleMouseOver(node,data) {
      this.$set(data, "isHover", true);
    },
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span style="border:1px solid red;float:right">
            <el-button size="mini" type="text" on-click={ () => this.append(data) }>
              <i class="el-icon-plus"></i>
            </el-button>
            <el-button size="mini" type="text" on-click={ () => this.append(data) }>
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>
              <i class="el-icon-delete"></i>
            </el-button>
          </span>
        </span>
      );
    },
    //重置表单信息
    restFormType() {
      this.$nextTick(() => {
        if (this.$refs.goodsTypeForm) this.$refs.goodsTypeForm.resetFields();
      });
    },
    //点击添加商品分类名称
    handleGoodsTypeAdd(node,data){
      this.dialogFormTypeVisible = true
      this.title = '添加'
      this.node = node
      if (!node){
        this.disabled = true
        this.goodsTypeForm.parentTypeName = '主目录'
      }else{
        this.disabled = false
        this.goodsTypeForm.parentTypeName = data.parentTypeName
        this.goodsTypeForm.parentType = data.id
        //级别
        // this.goodsTypeForm.typeLevel = node.childNodes.length + 1
      }
    },
    //点击修改商品分类名称
    handleGoodsTypeUpdate(node,data){
      this.dialogFormTypeVisible = true
      this.title = '修改'
      this.goodsTypeForm = this.cloneObj(data)
    },
    //添加商品分类确认按钮
    submitGoodsType(){
      this.$refs['goodsTypeForm'].validate((valid) => {
        if (valid) {
          let submit = Object.assign(
            this.goodsTypeForm,
          );
          let request;
          if (this.title == '添加') {
            request = goodsTypeAdd(submit);
          } else {
            request = goodsTypeMod(submit);
          }
          console.log(submit, 'submit');
          request.then((resp) => {
            this.$message.success(resp.message || '成功');
            this.dialogFormTypeVisible = false;
            this.getProduct();
          });
        }
      })
    },
    //删除商品分类
    handleGoodsTypeDelete(node,data){
      this.confirm().then(() => {
        goodsTypeDel([data.id]).then((resp) => {
            this.$message.success(resp.message || "成功");
            this.getProduct();
          }
        );
      });
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
}
</script>

<style scoped lang="scss">
.el-tree-project {
  max-height: calc(100% - 32px);
  .el-tree-node {
    .el-tree-node__content {
      &:hover {
        color: #64b0f2;
      }
      height: 40px;
      margin-bottom: 5px;
      border-radius: 5px;
      display: flex;
      .custom-tree-node {
        display: flex;
        flex: 1;
        justify-content: space-between;
        .tree-node-tool {
          flex: 0 0 46px;
        }
        .tree-node-title {
          flex: 1;
          width: 0;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    &.is-current {
      > .el-tree-node__content {
        color: #64b0f2 !important;
        span {
          color: #64b0f2 !important;
        }
      }
    }
  }
}
</style>
